<template>  
  <view>
  	<view class="autoview-clz">
  		<view class="autoview-back">
  			<text class="autoview-title">Personal Center</text>
  		</view>
		<view class="autoview-1">
		    <image class="avatar" src="/static/image/tx.png"></image>  
			<view class="autoview-2">
		      <text class="autoview-title">Personal Center</text>
			</view>  
			<view class="autoview-3">
				<text class="autoview-btn" @click="logout">Logout</text>
			</view> 
		  </view>  
	</view> 
  </view>  
</template>

<script>
	export default {
		data() {
			return {
				pic: 'https://uviewui.com/common/logo.png',
				show: true
			}
		},
		onLoad() {

		},
		methods: {
			logout(){
				localStorage.clear();
				uni.redirectTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		    font-family: 'Roboto';  
		    src: url('../../static/fonts/Roboto-Black-1.ttf') format('truetype');  
		} 
		.content{
			background-color: #F0F0F0;
			height:auto;
			z-index: 0;
		}
		.autoview-clz{
			padding-top: 106rpx;  
			background-size: contain;
			background-image: url('../../static/image/bg.png');
			height: 480rpx;
			font-family: Roboto;
			font-size: 24px;
			color: #333333;
				
		}
		.autoview-title{
			margin-left: 40rpx;
			font-family: Roboto;
			font-size: 48rpx;
			color: #333333;
		}
		.autoview-1{
			margin-left: 24rpx;
			margin-top: 178rpx;
			width: 702rpx;
			height: 400rpx;
			background: linear-gradient( 180deg, #FAC8D5 0%, #FFFFFF 100%), #FFFFFF;
			box-shadow: 0px 2px 24px 0px rgba(125,39,62,0.16);
			border-radius: 24rpx;
			backdrop-filter: blur(4.923076923076923px);
			
		}
	
		.avatar {  
		  width: 100px; /* 根据需要调整 */  
		  height: 100px; /* 根据需要调整，保持宽高相等形成圆形 */  
		  border-radius: 50%; /* 圆形头像 */  
		  position: absolute; /* 绝对定位 */  
		  top: -50px; /* 向上偏移半个头像的高度，使其只露出上半圆 */  
		  left: 50%; /* 水平居中 */  
		  transform: translateX(-50%); /* 向左偏移自身宽度的50%，确保完全居中 */  
		  z-index: 10; /* 确保头像位于卡片之上 */  
		}  
		
		.autoview-2{
			padding-top: 120rpx;
			text-align: center;
		}
	  
		.autoview-3{
			margin-top: 60rpx;
			margin-left: 164rpx;
			width: 180px;
			height: 38px;
			background: #E6A1B3;
			border-radius: 24px;
		}
		.autoview-btn{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 16px;
			color: #FFFFFF;
			font-style: normal;
			padding-top: 64rpx;
			margin-left: 120rpx;
		}
	
</style>
